<template>
  <div>
    <el-card shadow="never">
      <div style="text-align: center;">
        选择日期：
        <el-date-picker
          size="small"
          @change="changeDateValue"
          v-model="dateValue"
          :picker-options="pickerOptionsdate"
          type="date"
          placeholder="选择日">
        </el-date-picker>
        <el-button @click="search" class="button" size="small" round icon="el-icon-search">查询</el-button>
      </div>
    </el-card>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card shadow="never">
          <el-row style="padding: 10px;">
            <el-col :span="8">
              <div class="items">
                <div class="title">回头客总数</div>
                <div class="content">{{frequentCount}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="items item">
                <div class="title">新客总数</div>
                <div class="content">{{newerCount}}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="items">
                <div class="title">回头率占比</div>
                <div class="content">{{ratioFrequency}}</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never">
          <el-row style="padding: 10px;">
            <el-col :span="15">
              <div class="items">
                <div class="title">平均上次到访间隔天数</div>
                <div class="content">{{averageInterval}} 天</div>
              </div>
            </el-col>
            <el-col :span="9">
              <div class="items item2">
                <div class="title">相比前日</div>
                <div class="content">{{ratioAverageInterval}}</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card shadow="never">
          <el-row style="padding: 10px;">
            <el-col :span="15">
              <div class="items">
                <div class="title">近一月平均到访天数</div>
                <div class="content">{{averageFrequency}} 天</div>
              </div>
            </el-col>
            <el-col :span="9">
              <div class="items item2">
                <div class="title">相比前日</div>
                <div class="content">{{ratioAverageFrequency}}</div>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
    <el-card shadow="never">
      <p style="margin: 0 0 20px 0;font-size: 18px;">回访活跃度分析</p>
      <el-row :gutter="20">
        <el-col :span="12">
          <p style="margin: 20px 0;font-size: 15px;">上次到访间隔天数分布</p>
          <el-row>
            <el-col :span="16">
              <chart :options="lastTimeOptions" style="height: 300px;"></chart>
            </el-col>
            <el-col :span="8">
              <ul style="list-style: none;height: 248px;padding: 70px 0 0;">
                <li style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;">
                  <span style="border-radius: 8px;background-color: #a1c4fe;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"></span>
                  <span style="color: rgba(0,0,0,.65);display: inline-block;width: auto;min-width: 10px;">{{interval.dateStr0}}</span>
                  <div style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;">|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;">{{interval.proportion0}}</span>
                  </span>
                </li>
                <li style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;">
                  <span style="border-radius: 8px;background-color: #f1c23f;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"></span>
                  <span style="color: rgba(0,0,0,.65);display: inline-block;width: auto;">{{interval.dateStr1}}</span>
                  <div style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;">|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;">{{interval.proportion1}}</span>
                  </span>
                </li>
                <li style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;">
                  <span style="border-radius: 8px;background-color: #fb9867;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"></span>
                  <span style="color: rgba(0,0,0,.65);display: inline-block;width: auto;">{{interval.dateStr2}}</span>
                  <div style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;">|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;">{{interval.proportion2}}</span>
                  </span>
                </li>
                <li style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;">
                  <span style="border-radius: 8px;background-color: #8adac0;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"></span>
                  <span style="color: rgba(0,0,0,.65);display: inline-block;width: auto;">{{interval.dateStr3}}</span>
                  <div style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;">|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;">{{interval.proportion3}}</span>
                  </span>
                </li>
              </ul>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <p style="margin: 20px 0;font-size: 15px;">近一月到访天数分布</p>
          <el-row>
            <el-col :span="16">
              <chart :options="inRecentMonthOptions" style="height: 300px;"></chart>
            </el-col>
            <el-col :span="8">
              <ul style="list-style: none;height: 248px;padding: 0;">
                <p style="color: rgba(0,0,0,.65);font-size: 14px;margin-left: -15px;">低频回头客</p>
                <li style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;">
                  <span style="border-radius: 8px;background-color: #a1c4fe;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"></span>
                  <span style="color: rgba(0,0,0,.65);display: inline-block;width: auto;min-width: 10px;">{{frequency.dateStr0}}</span>
                  <div style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;">|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;">{{frequency.proportion0}}</span>
                  </span>
                </li>
                <p style="color: rgba(0,0,0,.65);font-size: 14px;margin-left: -15px;">高频回头客</p>
                <li style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;">
                  <span style="border-radius: 8px;background-color: #f1c23f;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"></span>
                  <span style="color: rgba(0,0,0,.65);display: inline-block;width: auto;">{{frequency.dateStr1}}</span>
                  <div style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;">|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;">{{frequency.proportion1}}</span>
                  </span>
                </li>
                <li style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;">
                  <span style="border-radius: 8px;background-color: #fb9867;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"></span>
                  <span style="color: rgba(0,0,0,.65);display: inline-block;width: auto;">{{frequency.dateStr2}}</span>
                  <div style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;">|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;">{{frequency.proportion2}}</span>
                  </span>
                </li>
                <li style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;">
                  <span style="border-radius: 8px;background-color: #8adac0;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"></span>
                  <span style="color: rgba(0,0,0,.65);display: inline-block;width: auto;">{{frequency.dateStr3}}</span>
                  <div style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;">|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;">{{frequency.proportion3}}</span>
                  </span>
                </li>
                <li style="cursor: pointer;margin-bottom: 16px;height: 22px;line-height: 22px;">
                  <span style="border-radius: 8px;background-color: #f6a5c8;display: inline-block;margin-right: 8px;position: relative;top: -1px;height: 8px;width: 8px;"></span>
                  <span style="color: rgba(0,0,0,.65);display: inline-block;width: auto;">{{frequency.dateStr4}}</span>
                  <div style="position: relative;top: -.06em;display: inline-block;margin: 0 8px;vertical-align: middle;">|</div>
                  <span style="position: absolute;">
                    <span style="line-height: 22px;">{{frequency.proportion4}}</span>
                  </span>
                </li>
              </ul>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    <el-card shadow="never">
      <p style="margin: 0 0 20px 0;font-size: 18px;">近一周高频回头客来访时段分布</p>
      <div id="container" style="margin: -80px 0 -70px;"></div>
    </el-card>
    <el-card shadow="never">
      <el-row>
        <el-col :span="12">
          <p style="margin: 0 0 20px 0;font-size: 18px;">回头客/新客分布走势分析</p>
        </el-col>
        <el-col :span="12" style="text-align: right;height: 40px;">
          <el-radio-group v-model="type" style="margin-bottom: 30px;" @change="clickType">
            <el-radio-button label="1" style="border-left: 1px solid #dcdfe6;">近7天</el-radio-button>
            <el-radio-button label="2">近15天</el-radio-button>
            <el-radio-button label="3">近30天月</el-radio-button>
          </el-radio-group>
        </el-col>
      </el-row>
      <chart :options="optionsFrequencyDistributions" style="height: 300px;"></chart>
      <el-table :data="frequencyDistributionsData" style="width: 100%;margin: 50px 30px 10px;">
        <el-table-column prop="date" label="日期"></el-table-column>
        <el-table-column prop="new" label="新客"></el-table-column>
        <el-table-column prop="newProportion" label="新客占比"></el-table-column>
        <el-table-column prop="low" label="低频回头客"></el-table-column>
        <el-table-column prop="lowProportion" label="低频回头客占比"></el-table-column>
        <el-table-column prop="high" label="高频回头客"></el-table-column>
        <el-table-column prop="highProportion" label="高频回头客占比"></el-table-column>
        <div slot="empty"><img src="../../../assets/blank_tip_page/blank_tip_page.png" alt=""></div>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import HeaderTitle from "@/components/HeaderTitle"
import CountUp from '@/components/CountUp/index'
import CardItem from '@/components/CardItem/index'
import Chart from '@/components/Charts'
import { formatDate } from "@/utils"
import { mapState } from 'vuex'
import G2 from '@antv/g2'
export default {
  name: 'RepeatPNSearch',
  components: {
    HeaderTitle,
    CountUp,
    CardItem,
    Chart
  },
  data(){
    return {
      dateValue: formatDate(new Date()), // 选择日期 日
      // 选择日 的限制
      pickerOptionsdate: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6
        }
      },
      // 数据看板
      frequentCount: '', //	string	回头客总数
      newerCount: '', //	string	新客总数
      ratioFrequency: '', //	string	回头客占比
      averageInterval: '', //	string	平均上次到访间隔天数
      ratioAverageInterval: '', //	string	相比前日
      averageFrequency: '', //	string	近一月平均到访天数
      ratioAverageFrequency: '', //	string	相比前日

      // 上次到访间隔天数分布图
      interval: {
        proportion0: '', //	string	占比
        dateStr0: '', //	string	时间区间
        proportion1: '', //	string	占比
        dateStr1: '', //	string	时间区间
        proportion2: '', //	string	占比
        dateStr2: '', //	string	时间区间
        proportion3: '', //	string	占比
        dateStr3: '', //	string	时间区间
      },
      // 近一月到访天数分布
      frequency: {
        proportion0: '', //	string	占比
        dateStr0: '', //	string	时间区间
        proportion1: '', //	string	占比
        dateStr1: '', //	string	时间区间
        proportion2: '', //	string	占比
        dateStr2: '', //	string	时间区间
        proportion3: '', //	string	占比
        dateStr3: '', //	string	时间区间
        proportion4: '', //	string	占比
        dateStr4: '', //	string	时间区间
      },
      // 回头客/新客分布走势分析
      type: 1, //	int	true	类型	1:近7天,2:近15天,3:近30天
      frequencyDistributionsData: []
    }
  },
  watch: {
    '$store.state.app.marketId'(val, oldVal){
      // 获取 回头客概况
      this.getFrequentSummary(this.dateValue)
      // 回访活跃度分析 上次到访间隔天数分布
      this.getFrequentActivities(this.dateValue)
      // 近一周高频回头客来访时段分布
      this.getG2AntvFrequentTable(this.dateValue)
      // 回头客/新客分布走势分析
      this.getFrequencyDistributions(this.dateValue, this.type)
    }
  },
  mounted(){
    // 获取 回头客概况
    this.getFrequentSummary(this.dateValue)
    // 回访活跃度分析 上次到访间隔天数分布
    this.getFrequentActivities(this.dateValue)
    // 近一周高频回头客来访时段分布
    this.getG2AntvFrequentTable(this.dateValue)
    // 回头客/新客分布走势分析
    this.getFrequencyDistributions(this.dateValue, this.type)
  },
  computed: {
    // 回访活跃度分析
    ...mapState('peopleNumber',['lastTimeOptions', 'inRecentMonthOptions', 'optionsFrequencyDistributions'])
  },
  methods:{
    // 改变日期
    changeDateValue(date){
      this.dateValue = formatDate(date)
    },
    // 获取 回头客概况
    getFrequentSummary(date){
      this.$store.dispatch('peopleNumber/fetchFrequentSummary', date).then(
        data => {
          this.frequentCount = parseInt(data.frequentCount)
          this.newerCount = parseInt(data.newerCount)
          this.ratioFrequency = data.ratioFrequency
          this.averageInterval = parseInt(data.averageInterval)
          this.ratioAverageInterval = data.ratioAverageInterval
          this.averageFrequency = parseInt(data.averageFrequency)
          this.ratioAverageFrequency = data.ratioAverageFrequency
        }
      ).catch(err => {})
    },
    // 回访活跃度分析
    getFrequentActivities(date){
      this.$store.dispatch('peopleNumber/fetchFrequentActivities', date).then(
        data => {
          // 上次到访间隔天数分布
          this.interval.proportion0 = data.interval[0].proportion
          this.interval.dateStr0 = data.interval[0].dateStr
          this.interval.proportion1 = data.interval[1].proportion
          this.interval.dateStr1 = data.interval[1].dateStr
          this.interval.proportion2 = data.interval[2].proportion
          this.interval.dateStr2 = data.interval[2].dateStr
          this.interval.proportion3 = data.interval[3].proportion
          this.interval.dateStr3 = data.interval[3].dateStr

          // 近一月到访天数分布
          this.frequency.proportion0 = data.frequency[0].proportion
          this.frequency.dateStr0 = data.frequency[0].dateStr
          this.frequency.proportion1 = data.frequency[1].proportion
          this.frequency.dateStr1 = data.frequency[1].dateStr
          this.frequency.proportion2 = data.frequency[2].proportion
          this.frequency.dateStr2 = data.frequency[2].dateStr
          this.frequency.proportion3 = data.frequency[3].proportion
          this.frequency.dateStr3 = data.frequency[3].dateStr
          this.frequency.proportion4 = data.frequency[4].proportion
          this.frequency.dateStr4 = data.frequency[4].dateStr

        }
      ).catch(err => {})
    },
    // 近一周高频回头客来访时段分布
    getG2AntvFrequentTable(date){
      this.$store.dispatch('peopleNumber/fetchG2AntvFrequentTable', date).then(
        res => {
          // console.log(res)
          // console.log(res.timeInterval)
          // console.log(res.table)

          // 横坐标 newTimeInterval
          const newTimeInterval = []
          for(let i=0;i<res.timeInterval.length;i++){
            const fromiTo = `${res.timeInterval[i].from}-${res.timeInterval[i].to}`
            newTimeInterval.push(fromiTo)
          }
          // console.log(newTimeInterval)

          // 纵坐标 newTableDate
          const newTableDate = []
          for(let i=0;i<res.table.length;i++){
            const fromiTo = res.table[i].date
            newTableDate.push(fromiTo)
          }
          // newTableDate.reverse()
          // console.log(newTableDate)

          // 主体数据
          // console.log(res.table.length)
          // console.log(res.table[0].counts)
          const source = []
          for(let i=0; i<res.table.length;i++){
            // const filterCounts0 = res.table[0].counts.map((item,index) => ({name: 0, day: index, sales: item}))
            const filterCounts = []
            filterCounts = res.table[i].counts.map((item,index) => ({name: i, day: index, sales: item}))
            filterCounts.map(item => {
              source.push(item)
            })
          }
          // console.log('source')
          // console.log(source)

          // const data = [
          //   [ 0, 0, 10 ], [ 0, 1, 19 ], [ 0, 2, 8 ], [ 0, 3, 24 ], [ 0, 4, 67 ],[ 0, 5, 67 ],[ 0, 6, 67 ],
          //   [ 1, 0, 92 ], [ 1, 1, 58 ], [ 1, 2, 78 ], [ 1, 3, 117 ], [ 1, 4, 48 ],[ 1, 5, 48 ],[ 1, 6, 48 ],
          //   [ 2, 0, 35 ], [ 2, 1, 15 ], [ 2, 2, 123 ], [ 2, 3, 64 ], [ 2, 4, 52 ],[ 2, 5, 52 ],[ 2, 6, 52 ],
          //   [ 3, 0, 72 ], [ 3, 1, 132 ], [ 3, 2, 114 ], [ 3, 3, 19 ], [ 3, 4, 16 ],[ 3, 5, 16 ],[ 3, 6, 16 ],
          //   [ 4, 0, 38 ], [ 4, 1, 5 ], [ 4, 2, 8 ], [ 4, 3, 117 ], [ 4, 4, 115 ],[ 4, 5, 115 ],[ 4, 6, 115 ],
          //   [ 5, 0, 88 ], [ 5, 1, 32 ], [ 5, 2, 12 ], [ 5, 3, 6 ], [ 5, 4, 120 ], [ 5, 5, 120 ], [ 5, 6, 120 ],
          //   [ 6, 0, 13 ], [ 6, 1, 44 ], [ 6, 2, 88 ], [ 6, 3, 98 ], [ 6, 4, 96 ],[ 6, 5, 96 ],[ 6, 6, 96 ],
          //   [ 7, 0, 31 ], [ 7, 1, 1 ], [ 7, 2, 82 ], [ 7, 3, 32 ], [ 7, 4, 30 ],[ 7, 5, 30 ],[ 7, 6, 30 ],
          //   [ 8, 0, 85 ], [ 8, 1, 97 ], [ 8, 2, 123 ], [ 8, 3, 64 ], [ 8, 4, 84 ],[ 8, 5, 84 ],[ 8, 6, 84 ]
          // ]  // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
          // const source = [];
          // for (let i = 0; i < data.length; i++) {
          //   const item = data[i];
          //   const obj = {};
          //   obj.name = item[0];
          //   obj.day = item[1];
          //   obj.sales = item[2];
          //   source.push(obj);
          // }
          // console.log(source)
          // Step 1: 创建 Chart 对象
          const chart = new G2.Chart({
            container: 'container', // 指定图表容器 ID
            forceFit: true,
            height: 500, // 指定图表高度
            padding: 100
          })
          // Step 2: 载入数据源
          chart.source(source, {
            name: {
              type: 'cat',
              values: newTableDate
            },
            day: {
              type: 'cat',
              values: newTimeInterval
            }
          })
          chart.axis('name', {
            tickLine: null,
            grid: {
              align: 'center',
              lineStyle: {
                lineWidth: 1,
                lineDash: null,
                stroke: '#f0f0f0'
              }
            }
          })
          chart.axis('day', {
            title: null,
            grid: {
              align: 'center',
              lineStyle: {
                lineWidth: 1,
                lineDash: null,
                stroke: '#f0f0f0'
              },
              showFirstLine: true
            }
          })
          chart.legend(false)
          // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
          chart.polygon()
            .position('name*day')
            .color('sales', '#bddfcf-#6beaad-#fcd88e-#f9b291-#fa7373')
            .label('sales', {
              offset: -2,
              textStyle: {
                fill: '#fff',
                shadowBlur: 2,
                shadowColor: 'rgba(0, 0, 0, .45)'
              }
            })
            .style({
              lineWidth: 1,
              stroke: '#fff'
            })
          // Step 4: 渲染图表
          chart.render()
          chart.interact('brush', {
            style: {
              lineWidth: 1,
              stroke: '#999',
              fill: '#999',
              fillOpacity: 0.3
            },
            onBrushmove() {
              chart.hideTooltip()
            }
          })
        }
      ).catch(err => {})
    },
    // 改变类型 1:近7天,2:近15天,3:近30天
    clickType(tab){
      this.type = tab
      // 回头客/新客分布走势分析
      this.getFrequencyDistributions(this.dateValue, this.type)
    },
    // 回头客/新客分布走势分析
    getFrequencyDistributions(date, type){
      this.$store.dispatch('peopleNumber/fetchFrequencyDistributions', {date,type}).then(
        data => {
          this.frequencyDistributionsData = data.table
        }
      ).catch(err => {})
    },
    search(){
      // 获取 回头客概况
      this.getFrequentSummary(this.dateValue)
      // 回访活跃度分析 上次到访间隔天数分布
      this.getFrequentActivities(this.dateValue)
      // 近一周高频回头客来访时段分布
      this.getG2AntvFrequentTable(this.dateValue)
      // 回头客/新客分布走势分析
      this.getFrequencyDistributions(this.dateValue, this.type)
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-table__empty-text{
    width: 100%;
  }
.button {
  background: #64d9d6;
  color: #fff;
  margin-left: 40px;
}
.items{
  background: #fff;
  border-radius: 2px;
  text-align: center;
  .title{
    margin-top: 0;
    margin-bottom: 1em;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0,0,0,.45);
    line-height: 22px;
    height: 22px;
  }
  .content{
    display: block;
    font-size: 25px;
    color: rgba(0,0,0,.85);
    line-height: 38px;
    height: 38px;
  }
}
.item{
  border-left: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
  vertical-align: middle;
}
.item2{
  border-left: 1px solid #e8e8e8;
  vertical-align: middle;
}
</style>
